<script setup>
import {deleteScore, getAllScore} from "@/hook/scoreHook.js";
import {onMounted, ref, toRaw} from "vue";
import Pagination from "@/components/pagination.vue";
import UserSearchBar from "@/components/userSearchBar.vue";
import AddScore from "@/components/AddScore.vue";
import UserEditor from "@/components/userEditor.vue";
import ScoreEditor from "@/components/scoreEditor.vue";
import {useScoreStore, useUserStore} from "@/store/userStore.js";
import ScoreSeacherBar from "@/components/scoreSeacherBar.vue";
import AddUser from "@/components/addUser.vue";

let type = ref('')
let username = ref('')
onMounted(async () => {
  await useScoreStore().updateScores(1, 7)
  // useScoreStore().scores = await getAllScore(1,7,username.value,type.value)
})
//分页逻辑
const handlePageChange = async (newPage) => {
  await useScoreStore().updateScores(newPage, 7)
  // useScoreStore().scores = await getAllScore(newPage, 7,username.value,type.value);
};
// //分页用户查询
// const pageSearchByUsername = async (username,selected) => {
//   await useScoreStore().updateScores(1, 7)
//   // useScoreStore().scores = await getAllScore(1, 7,u,selected);
// };

</script>

<template>
  <add-score :scores="useScoreStore().scores" class="text-base-content" v-if="useUserStore().user.role!=='STUDENT'"></add-score>
  <score-seacher-bar class="text-base-content/50" :type="''" ></score-seacher-bar>
  <div class="overflow-x-auto text-base-content">
    <table class="table table-md table-pin-rows table-pin-cols">
      <thead>
      <tr>
        <th>#</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>班级</th>
        <th>课程</th>
        <th>教师</th>
        <th>学分</th>
        <th>分数</th>
        <th>满分</th>
        <th>学期</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(score, index) in useScoreStore().scores?.records" :key="index"
          :class="[{'bg-base-300':index%2==0}]">
        <th>{{ (index + 1 + (useScoreStore().scores?.size*(useScoreStore().scores?.current-1)))}}</th>
        <!--        <td>{{ score.id }}</td>-->
        <td>{{ score.username }}</td>
        <td>{{ score.realName }}</td>
        <td>{{ score.gender }}</td>
        <td>{{ score.className }}</td>
        <td>{{ score.courseName }}</td>
        <td>{{ score.teacherName }}</td>
        <td>{{ score.credit }}</td>
        <td :class="[{'text-red-600':score.score<60}]">{{ score.score }}</td>
        <td>{{ score.fullMark }}</td>
        <td>{{ score.semesterName }}</td>
        <th class="flex gap-2" v-if="useUserStore().user.role!=='STUDENT'">
        <score-editor :score="score">编辑</score-editor>
        <!--          <button class="btn btn-accent btn-xs">编辑</button>-->
        <button class="btn btn-error btn-xs" @click="deleteScore(score.scoreId)">删除</button>
        </th>
      </tr>
      </tbody>
    </table>
  </div>
  <pagination :data="useScoreStore().scores" @page-change="handlePageChange"></pagination>
</template>

<style scoped>

</style>